<template>
	<view class="orderEvaluation">
		<n-loading></n-loading>
		<view v-if="orderInfo">
			<!-- 商品评价 -->
			<view class="reviews" v-for="(item,index) of orderInfo.items" :key="index">
				<!-- <image class="reviewsImg" :src="item.image"></image> -->
				<dh-image class="reviewsImg" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
				<view class="reviewsInfo">
					<view class="title ellipsis">{{item.name}}</view>
					<view class="typeval">{{item.specs}}</view>
				</view>
			</view>
			<!-- 分型体验 -->
			<view class="shareSet">
				<view class="title">分享你的使用体验</view>
				<view class="">
					<textarea v-model="content" class="comment" placeholder-style="color:#999999" placeholder="|您的评价可以帮助更多想买的人~" auto-height="true"/>
				</view>
				<view class="addImage">
					<view class="pImgageBox" v-for="(item,index) of imgList" :key="index">
						<view class="close" :data-index="index" @tap="deleteImg">
							<u-icon size="40" name="close-circle-fill" color="#999999"></u-icon>
						</view>
						<image class="pImgage" :src="item"></image>
					</view>
					<!-- <u-upload :action="action" :file-list="fileList" ></u-upload> -->
					<view class="addBtn" @tap="addImages">
						<u-icon name="plus" color="#999999" size="80"></u-icon>
					</view>
				</view>
				<view class="title mt48">{{orderInfo.is_offline==0?'物流':''}}服务评价</view>
				<view class="reviewsGo">
					<text class="titleGo">商品评价</text>
					<u-rate :count="countS" v-model="valueS" min-count="1" active-color="#FF8A1E" gutter="26" size="36" @change="goodsServices"></u-rate>
					<text class="reviewsVal">{{reviewsS}}</text>
				</view>
				<view class="reviewsGo mt16" v-if="orderInfo.is_offline==0">
					<text class="titleGo">物流服务</text>
					<u-rate :count="countL" v-model="valueL" min-count="1" active-color="#FF8A1E" gutter="26" size="36" @change="logisticsServices"></u-rate>
					<text class="reviewsVal">{{reviewsL}}</text>
				</view>
				<view class="reviewsGo mt16">
					<text class="titleGo">服务态度</text>
					<u-rate :count="countA" v-model="valueA" min-count="1" active-color="#FF8A1E" gutter="26" size="36" @change="serviceAttitude"></u-rate>
					<text class="reviewsVal">{{reviewsA}}</text>
				</view>
			</view>
			<!-- 发布按钮 -->
			<view class="addBtnBox" :style="{paddingBottom:isIphoneX?'76rpx':''}">
				<view class="addAddressBtn" @tap="releaseGo">发布</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 手机机型
				modelmes:null,
				isIphoneX:false,
				orderInfo:null,
				order_id:null,
				goods_id:null,
				owner_id:null,
				product_id:{
					id:null,
					num:1,
				},
				content:'',
				image_ids:[],
				countS: 5,
				valueS: 1,//score 商品星级 1-5星
				reviewsS:'',
				countL: 5,
				valueL: 1,//logistics_score 物流服务星级 1-5星
				reviewsL:'',
				countA: 5,
				valueA: 1,//service_score 服务态度星级 1-5星
				reviewsA:'',
				imgList:[],
			}
		},
		onLoad: function (option) {
			// 判断机型iPhone X的
			this.modelmes = uni.getStorageSync('modelmes');
			if (this.modelmes.search('iPhone X') != -1) {
			   this.isIphoneX = true;
			}
			this.order_id = option.id;
			this.getOrderInfo(option.id);
		},
		methods:{
			getOrderInfo(id){
				this.apiget('/fun/order/view',{id:id}).then(res =>{
					if(res.data.status == 200 ) {
						this.orderInfo = res.data.data;
						this.owner_id = res.data.data.goodsOwner.owner_id;
						this.order_id = res.data.data.id;
						this.goods_id = res.data.data.items[0].goods_id;
						this.product_id.id =  res.data.data.items[0].product_id;
						this.product_id.num = res.data.data.items[0].num;
					}
				})
			},
			goodsServices(e){///商品评价
				if(e == 1 || e == 2){
					this.reviewsS = '差';
				}else if(e == 3 || e == 4){
					this.reviewsS = '一般';
				}else{
					this.reviewsS = '好';
				}
			},
			logisticsServices(e){///物流服务
				if(e == 1 || e == 2){
					this.reviewsL = '差';
				}else if(e == 3 || e == 4){
					this.reviewsL = '一般';
				}else{
					this.reviewsL = '好';
				}
			},
			serviceAttitude(e){//服务态度
				if(e == 1 || e == 2){
					this.reviewsA = '差';
				}else if(e == 3 || e == 4){
					this.reviewsA = '一般';
				}else{
					this.reviewsA = '好';
				}
			},
			// 上传图片
			addImages(){
				var _this = this;
				if(_this.imgList.length==9){
					uni.showToast({
						icon: 'none',
						duration:1000,
						title: '最多只能上传9张图片'
					});
					return false;
				}
				uni.chooseImage({
					count:9-_this.imgList.length,
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						tempFilePaths.forEach(v => {
							_this.uploadImg('/public/fileupload',v).then(res =>{
								var data = JSON.parse(res.data)
								if(data.status == 200 ) {
									_this.imgList.push(data.data.file_url);
								}
							})
						})
				    }
				});
			},
			// 删除图标
			deleteImg(e){
				var _index = e.currentTarget.dataset.index;
				this.imgList.splice(_index, 1);
			},
			// 发布成功
			releaseGo(){
				var _this = this;
				if(this.content == ''){
					uni.showToast({
						icon: 'none',
						duration:1000,
						title: '请填写评价内容'
					});
					return false;
				}
				this.apipost('/fun/goods/user-comment',{order_id:this.order_id,goods_id:this.goods_id,product_id:JSON.stringify(this.product_id),score:this.valueS,logistics_score:this.valueL,service_score:this.valueA,content:this.content,image_ids:this.imgList}).then(res =>{
					if(res.data.status == 200 ) {
						uni.showToast({
							icon: 'success',
							duration:1000,
							title: '评论成功',
							success: ress => {
								setTimeout(function (){
									uni.redirectTo({
										url: './evaluateSuccess?id='+_this.order_id
									});
								}, 1000);
							},
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.orderEvaluation{
		min-height: 100%;
		padding-bottom: 180rpx;
		background: #F8F8FA;
	}
	.mt16{
		margin-top: 16rpx;
	}
	.mt48{
		margin-top: 48rpx;
	}
	.reviews{
		display: flex;
		padding: 16rpx 32rpx;
		background-color: #fff;
	}
	.reviewsImg{
		width: 160rpx;
		height: 160rpx;
		margin-right: 16rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
		.reviewsGo{
			margin-top: 40rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			
			.titleGo{
				margin-right: 30rpx;
			}
			
			.reviewsVal{
				color: #FF8A1E;
			}
		}
	
	.reviewsInfo{
		flex: auto;
		width: 1px;
		
		.title{
			font-size: 28rpx;
			line-height: 44rpx;
			color: #333;
		}
		.typeval{
			font-size: 24rpx;
			line-height: 36rpx;
			color: #666;
		}
	}
	.shareSet{
		margin-top: 16rpx;
		padding: 18rpx 32rpx 24rpx;
		background-color: #fff;
		
		.title{
			margin-bottom: 34rpx;
			font-size: 28rpx;
			line-height: 44rpx;
		}
		.comment{
			font-size: 28rpx;
			line-height: 44rpx;
		}
	}
	.addImage{
		display: flex;
		flex-wrap:wrap;
		// justify-content:space-between;
		margin-top: 40rpx;
		
		.pImgageBox{
			position: relative;
			margin: 0 16rpx 16rpx;
			
			.close{
				position: absolute;
				top: -18rpx;
				right: -18rpx;
				z-index: 1;
				height: 40rpx;
				width: 40rpx;
				font-size: 0;
				background-color: #fff;
				border-radius: 50%;
			}
		}
		.pImgage{
			width: 190rpx;
			height: 190rpx;
		}
		.addBtn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 190rpx;
			height: 190rpx;
			margin: 0 16rpx 16rpx;
			background: #ECEEF0;
		}
	}
	.addBtnBox{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 8rpx 32rpx;
		line-height: 80rpx;
		background-color: #fff;
		
		.addAddressBtn{
			height: 80rpx;
			background: #FF5238;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
		}
	}

</style>
